<template>
  <view>
    <view class="home-page">
      <HeaderNav></HeaderNav>
      <view class="home-conter">
        <view class="tit-item">
          <view class="tit">{{ i18n.h29 }} </view>
          <view class="titimg">
            <view>{{ i18n.h30 }} </view>
            <image src="/static/images/newent.png" alt="" />
          </view>
          <view class="tit"> {{ i18n.h31 }}</view>
        </view>
        <view class="num-item">
          <view class="item">
            <view>{{ TotalStake || 0 }}</view>
            <view>{{ i18n.h32 }}</view>
          </view>
          <view class="item">
            <view>{{ Annualized || 0 }}</view>
            <view>{{ i18n.h33 }}</view>
          </view>
          <view class="item">
            <view>{{ TotalNodes || 0 }}</view>
            <view>{{ i18n.h34 }}</view>
          </view>
        </view>
        <view class="btns-item">
          <view @click="toPage('/subPackages/other/staking')">{{
            i18n.h35
          }}</view>
          <view @click="rulesModel = true">{{ i18n.h36 }}</view>
        </view>
        <view
          class="row-developed"
          v-if="noticeCont !== ''"
          @click="noticeModel = true"
        >
          <view class="lefts">
            <image src="/static/images/zhl.png" alt="" />
            <view>{{ noticeCont }} </view>
          </view>
          <view class="rights">
            <image src="/static/images/zhr.png" alt="" />
          </view>
        </view>
        <view class="akc-card">
          <view class="tite">
            <view>AKC</view>
            <view>{{ i18n.h38 }}</view>
          </view>
          <view class="tips">{{ i18n.h39 }} </view>
          <view class="tips">{{ i18n.h40 }}</view>
          <view class="tips">{{ i18n.h41 }}</view>
        </view>
        <view class="intre-list">
          <view v-for="(item, index) in intreList" :key="index" class="item">
            <view class="tops">
              <image :src="'/static/images/' + item.img + '.png'" alt="" />
              <view>{{ item.title }}</view>
            </view>
            <view class="bottoms">{{ item.cont }}</view>
          </view>
        </view>
        <view class="direct-list">
          <view
            v-for="(item, index) in directList"
            :key="index"
            :class="activeDire == index ? 'item' : 'pItem'"
          >
            <view class="tops">
              <view>{{ item.title }}</view>
            </view>
            <view class="bottoms">{{ item.cont }}</view>
          </view>
        </view>
        <view class="link">
          <view class="link-item" @click="toLink(Instagram)">
            <image
              src="/static/images/telegram.png"
              mode=""
              class="link1"
            ></image>
          </view>
          <view class="link-item" @click="toLink(Twitter)">
            <image
              src="/static/images/Twitter.png"
              mode=""
              class="link2"
            ></image>
          </view>
          <view class="link-item" @click="toLink(Facebook)">
            <image
              src="/static/images/Facebook.png"
              mode=""
              class="link3"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <FooterNav :modelKey="1" />

    <u-popup
      :show="rulesModel"
      @close="rulesModel = false"
      round="24"
      mode="center"
    >
      <view class="rule-mod">
        <view class="headers">
          <view>{{ i18n.h54 }}</view>
          <image
            src="/static/images/close.png"
            alt=""
            @click="rulesModel = false"
          />
        </view>
        <view v-html="i18n.h159" class="cont"></view>
        <view class="btn" @click="closeRule()">{{ i18n.h135 }}</view>
      </view>
    </u-popup>
    <modal
      :show="noticeModel"
      custom
      @cancel="noticeModel = false"
      :title="'公告'"
      :padding="'50rpx  44rpx'"
      width="654rpx"
    >
      <view class="rule-mod">
        <view class="headers">
          <view>{{ i18n.h136 }}</view>
          <image
            src="/static/images/close.png"
            alt=""
            @click="noticeModel = false"
          />
        </view>
        <view class="cont">
          {{ noticeCont }}
        </view>
        <view class="btn" @click="noticeModel = false">{{ i18n.h135 }}</view>
      </view>
    </modal>
  </view>
</template>
<script>
import HeaderNav from "../../components/header-nav/header-nav.vue";
import FooterNav from "@/components/footer-nav/footer-nav.vue";
import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import config from "@/config/index.js";

import { getHomeDataApi, notice } from "@/api/module/home";
import {} from "@/common/wb3";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  props: {},
  data() {
    return {
      rulesModel: false, // 玩法规则
      intreList: [
        {
          img: "hf",
          title: this.$t("home.h42"),
          cont: this.$t("home.h43"),
        },
        {
          img: "hm",
          title: this.$t("home.h44"),
          cont: this.$t("home.h144"),
        },
        {
          img: "hs",
          title: this.$t("home.h46"),
          cont: this.$t("home.h47"),
        },
      ],

      activeDire: 2,
      directList: [
        {
          title: this.$t("home.h48"),
          cont: this.$t("home.h49"),
        },
        {
          title: this.$t("home.h50"),
          cont: this.$t("home.h51"),
        },
        {
          title: this.$t("home.h52"),
          cont: this.$t("home.h53"),
        },
      ],
      Instagram: "",
      Twitter: "",
      Facebook: "",

      Annualized: "",
      TotalNodes: "",
      TotalStake: "",
      noticeModel: false,
      noticeCont: "",
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
  },

  created() {},
  mounted() {},
  onShow() {
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
      this.getNotice();
    },
    getInfo() {
      getHomeDataApi().then((res) => {
        if (res.code == 0) {
          this.Annualized = res.data.Annualized;
          this.TotalNodes = res.data.TotalNodes;
          this.TotalStake = res.data.TotalStake;

          this.Instagram = res.data.TelegramServer;
          this.Twitter = res.data.TwitterServer;
          this.Facebook = res.data.FacebookServer;
        }
      });
    },
    getNotice() {
      notice().then((res) => {
        if (res.code == 0) {
          this.noticeCont = res.data;
        }
      });
    },
    closeRule() {
      this.rulesModel = false;
    },
    copy() {
      uniCopy({
        content: this.address,
        success: (res) => {
          uni.showToast({
            title: this.$t("home.h25"),
            icon: "none",
          });
          this.shareModel = false;
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },

    toPage(path) {
      if (path !== "") {
        uni.navigateTo({
          url: path,
        });
      }
    },
    toLink(path) {
      if (path !== "") {
        window.open(path, "_blank");
      }
    },
    toRecord(type) {
      uni.navigateTo({
        url: `/pages/home/record?type=${type}`,
      });
    },
    number2string(num) {
      num = String(num);
      var eSplit = num.split("e");
      var e = +(eSplit[1] || 0);
      var pad = "0".repeat(500);
      var numSplit = eSplit[0].split(".");
      var str;
      var numSplit1 = numSplit[1] || "";
      if (e < 0) {
        str = "0." + (pad + numSplit[0]).slice(e) + numSplit1;
      } else {
        str =
          numSplit[0] +
          (numSplit1 + pad).slice(0, e) +
          "." +
          numSplit1.slice(e);
      }
      return (
        str
          .replace(/\.?0*$/, "")
          .replace(/^0*/, "")
          .replace(/^\./, "0.") || "0"
      );
    },
    getTemp(timestamp) {
      // let timestamp = 1662537367
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        " " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
      // let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
      // 时间戳

      console.log(GMT); // 2022-09-07 15:56:07
    },
    getCaption(strings) {
      var strLength = strings.length;
      var shortName = strings.substring(0, 2);
      var shortName2 = strings.substring(strLength - 4, strLength);
      let str = `${shortName}...${shortName2}`;
      return str;
    },
  },
};
</script>
 <style lang="scss" scoped>
.home-page {
  background: url("/static/images/homebg.png") no-repeat;
  background-size: 100% 100%;
  // min-height: 100vh;
  // height: 3628rpx;
  background-size: contain;
  .home-conter {
    padding: 0 0 80rpx;
    .tit-item {
      padding: 0 20rpx;
      margin: 50rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      .tit {
        font-weight: bold;
        font-size: 48rpx;
        color: #000000;
      }
      .titimg {
        margin: 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        view {
          font-weight: bold;
          font-size: 48rpx;
          color: #835bf1;
        }
        image {
          margin-left: 30rpx;
          width: 130rpx;
          height: 48rpx;
        }
      }
    }
    .num-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        :nth-child(1) {
          font-weight: bold;
          font-size: 48rpx;
          color: #835bf1;
          margin: 0 0 10rpx 0;
        }
        :nth-child(2) {
          font-weight: 400;
          font-size: 24rpx;
          color: #97a3b6;
        }
      }
    }
    .btns-item {
      margin: 62rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      view {
        width: 654rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        font-weight: normal;
        font-size: 28rpx;
        border-radius: 100rpx;
      }
      :nth-child(1) {
        color: #ffffff;
        background: #835bf1;
        border: 2rpx solid #835bf1;
      }
      :nth-child(2) {
        margin-top: 24rpx;
        color: #835bf1;
        background: #f5f3fe;
        border: 2rpx solid #dcd6fb;
      }
    }
    .row-developed {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 654rpx;
      height: 68rpx;
      background: #f8fafc;
      border-radius: 200rpx;
      padding: 0 30rpx;
      margin: 0 auto 42rpx;
      .lefts {
        display: flex;
        align-items: center;
        image {
          width: 36rpx;
          height: 36rpx;
        }
        view {
          width: 440rpx;
          margin-left: 5rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
        }
      }
      .rights {
        image {
          width: 26rpx;
          height: 14rpx;
        }
      }
    }
    .akc-card {
      height: 388rpx;
      background: url("/static/images/cardbg.png") no-repeat;
      background-size: 100% 100%;
      .tite {
        padding-top: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        :nth-child(1) {
          font-size: 64rpx;
          color: #835bf1;
        }
        :nth-child(2) {
          margin-left: 8rpx;
          font-size: 64rpx;
          color: #000000;
        }
      }
      .tips {
        font-weight: 400;
        font-size: 28rpx;
        color: #97a3b6;
        margin-top: 12rpx;
        text-align: center;
      }
    }
    .intre-list {
      padding: 0 48rpx;
      .item {
        background: url("/static/images/cardbg.png") no-repeat;
        background-size: auto;
        padding: 44rpx;
        border-radius: 30rpx;
        border: 2rpx solid #e3e8ef;
        margin-bottom: 24rpx;
        .tops {
          display: flex;
          align-items: center;
          image {
            width: 93rpx;
            height: 101rpx;
          }
          view {
            margin-left: 12rpx;
            font-weight: 600;
            font-size: 36rpx;
            color: #000000;
          }
        }
        .bottoms {
          margin-top: 24rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #97a3b6;
        }
      }
    }
    .direct-list {
      padding: 0 48rpx;
      .item {
        background-size: auto;
        padding: 44rpx;
        border-radius: 30rpx;
        background: #f8fafc;
        border: 2rpx solid #e3e8ef;
        margin-bottom: 24rpx;
        .tops {
          view {
            font-weight: 600;
            font-size: 36rpx;
            color: #000000;
          }
        }
        .bottoms {
          margin-top: 24rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #97a3b6;
        }
      }
      .pItem {
        background-size: auto;
        padding: 44rpx;
        border-radius: 30rpx;
        background: #835bf1 !important;
        color: #ffffff !important;
        margin-bottom: 24rpx;
        .tops {
          view {
            font-weight: 600;
            font-size: 36rpx;
            color: #ffffff !important;
          }
        }
        .bottoms {
          margin-top: 24rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #e3e8ef !important;
        }
      }
    }
    .link {
      display: flex;
      justify-content: center;
      margin-top: 40rpx;
      .link-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 30rpx;
        image {
          width: 49rpx;
          height: 49rpx;
        }
      }
    }
  }
}
</style>
